<template>
  <div class="app-container" style="font-family: '微软雅黑'">
    <!-- {{ $route.params.salonid }} - {{ $route.query.scode }} -->
    <div style="width: 100%; height: 50px">
      <img src="@/assets/images/clerk_title.png" height="100%">
    </div>
    <div
      style="
        position: absolute;
        width: 54px;
        height: 60px;
        top: 0px;
        right: 30px;
      "
    >
      <img src="@/assets/images/diag_txs_logo.png" height="100%">
    </div>

    <pre
      style="
        margin: 0;
        width: 100%;
        height: 20px;
        background-color: #d14649;
        font-family: '微软雅黑';
        font-size: small;
        line-height: 20px;
      "
    >  S T O R E    P R O F I T    S Y S T E M</pre>

    <!-- <p style="font-size: 30px; margin-top: 10px;margin-bottom: 10px;text-align: center;color:#409EFF;">
    </p> -->

    <div class="sheet-content" style="font-size: 16px;">
      <el-col :span="4" style="color:#409EFF;text-align: center;">{{ clerkObj.cname }}</el-col>
      <el-col :span="2">编号：</el-col>
      <el-col :span="4">{{ clerkObj.ccode }}</el-col>
      <el-col :span="2">性别：</el-col>
      <el-col :span="2">{{ clerkObj.sex===0?'男':'女' }}</el-col>
      <el-col :span="2">店铺：</el-col>
      <el-col :span="6">{{ clerkObj.sname }}</el-col>
      <el-col :span="2">
        <el-link
          :href="'/customreport/' + clerkObj.id + '.pdf'"
          target="_blank"
          type="primary"
          style="color:#409EFF;font-size: 16px;text-align: center;"
        >熠学报告</el-link>
      </el-col>
    </div>

    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <div style="line-height: 40px;">
          <el-row style="line-height: 10px">
            <el-col
              :span="4"
              style="color: #dcdfe6; text-align: center"
            >日期</el-col>
            <el-col :span="5" style="color: #dcdfe6">年柱</el-col>
            <el-col :span="5" style="color: #dcdfe6">月柱</el-col>
            <el-col :span="5" style="color: #dcdfe6">日柱</el-col>
            <el-col :span="5" style="color: #dcdfe6">时柱</el-col>
          </el-row>
          <el-row>
            <el-col
              :span="4"
              style="color: #dcdfe6; text-align: center"
            >主星</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.ngx
            }}</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.ygx
            }}</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.rgx
            }}</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.sgx
            }}</el-col>
          </el-row>
          <el-row>
            <el-col
              :span="4"
              style="color: #dcdfe6; text-align: center"
            >天干</el-col>
            <el-col :span="5">
              <el-tag :type="getTagType(clerkObj.ngz)" effect="dark" style="font-size: x-large;">
                {{ clerkObj.ngz.charAt(0) }}
              </el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag :type="getTagType(clerkObj.ygz)" effect="dark" style="font-size: x-large;">
                {{ clerkObj.ygz.charAt(0) }}
              </el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag :type="getTagType(clerkObj.rgz)" effect="dark" style="font-size: x-large;">
                {{ clerkObj.rgz.charAt(0) }}
              </el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag
                v-if="clerkObj.sgz"
                :type="getTagType(clerkObj.sgz)"
                effect="dark"
                style="font-size: x-large;"
              >
                {{ clerkObj.sgz.charAt(0) }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="4"
              style="color: #dcdfe6; text-align: center"
            >地支</el-col>
            <el-col :span="5">
              <el-tag :type="getTagType(clerkObj.nzz)" effect="dark" style="font-size: x-large;">
                {{ clerkObj.nzz.charAt(0) }}
              </el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag :type="getTagType(clerkObj.yzz)" effect="dark" style="font-size: x-large;">
                {{ clerkObj.yzz.charAt(0) }}
              </el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag :type="getTagType(clerkObj.rzz)" effect="dark" style="font-size: x-large;">
                {{ clerkObj.rzz.charAt(0) }}
              </el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag
                v-if="clerkObj.szz"
                :type="getTagType(clerkObj.szz)"
                effect="dark"
                style="font-size: x-large;"
              >
                {{ clerkObj.szz.charAt(0) }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col
              :span="4"
              style="color: #dcdfe6; text-align: center"
            >副星</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.nzx
            }}</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.yzx
            }}</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.rzx
            }}</el-col>
            <el-col :span="5" style="font-size: large">{{
              clerkObj.szx
            }}</el-col>
          </el-row>
        </div>

        <div class="sheet-content" style="background-color: #fff;">
          <div>商机</div>
          <p style="color:#67c23a;background-color: #f0f9eb;">{{ clerkObj.tagsj }}</p>
          <div>客情</div>
          <p style="color:#409eff;background-color: #ecf5ff;">{{ clerkObj.tagkq }}</p>
          <div>其他</div>
          <p style="color:#e6a23c;background-color: #fdf6ec;">{{ clerkObj.tagqt }}</p>
        </div>
      </el-col>
      <el-col :span="11" :offset="1">
        <div style="font-size: larger;font-weight: bold;">
          <div style="width: 100%;text-align: center;">消费记录（日期，品项，成交价，成交分析）</div>
          <el-row :gutter="0">
            <el-col :span="4" :offset="0">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
              />
            </el-col>
            <el-col :span="6" :offset="0">
              <el-input v-model="value2" placeholder="品项" />
            </el-col>
            <el-col :span="4" :offset="0">
              <el-input v-model="value3" placeholder="成交价" />
            </el-col>
            <el-col :span="8" :offset="0">
              <el-input v-model="value4" placeholder="成交分析" />
            </el-col>
            <el-col :span="2" :offset="0">
              <el-button type="primary" @click="handleSpend">新增</el-button>
            </el-col>
          </el-row>
          <p v-html="clerkObj.spend" />
        </div>
        <el-divider />
        <div style="font-size: larger;font-weight: bold;">
          <div style="width: 100%;text-align: center;">跟踪</div>
          <p v-html="clerkObj.track" />
        </div>
      </el-col>
    </el-row>
    <!-- <div style="clear:both" /> -->
  </div>
</template>

<script>
import { getClerk, updateSpend } from '@/api/txs'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      clerkObj: {
        ngz: '',
        ygz: '',
        rgz: '',
        sgz: '',
        nzz: '',
        yzz: '',
        rzz: '',
        szz: ''
      }
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getClerk(this.$route.params.clerkid)
        .then(res => {
          this.clerkObj = res.data.data
          loading.close()
        })
        .catch(() => {
          this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
    },
    getTagType (tag) {
      if (tag) {
        const s = tag.charAt(1)
        if (s === '金') {
          return 'warning'
        }
        if (s === '木') {
          return 'success'
        }
        if (s === '水') {
          return ''
        }
        if (s === '火') {
          return 'danger'
        }
        if (s === '土') {
          return 'info'
        }
      }
    },
    handleSpend() {
      if (this.value1 === '' || this.value2 === '' || this.value3 === '') {
        this.$message.error('出错：需要填写相关信息！')
        return
      }
      const spend = dayjs(this.value1).format('YY-MM-DD') + ' / ' + this.value2 + ' / ' + this.value3 + ' / ' + this.value4
      if (this.clerkObj.spend && this.clerkObj.spend.length > 0) {
        this.clerkObj.spend = spend + '<br>' + this.clerkObj.spend
      } else {
        this.clerkObj.spend = spend
      }

      updateSpend(this.clerkObj.id, spend).then(() => {
        this.$notify({
          title: 'Success',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sheet-content {
  // margin-right: 30px;
  height: 60px;
  line-height: 30px;
  background-color: #f2f2f2;
  font-size: larger;
  font-weight: bold;
  padding: 20px;
  margin-bottom: 20px;
  .el-col {
    border:1px solid transparent;
  }
}
</style>
